<template>
    <div class="main-wrap">
        <header>猫眼电影</header>
        <section class="con">
            <router-view></router-view>
        </section>
        <footer>
            <ul>
                <router-link to="/main/movie" tag="li">电影</router-link>
                <router-link to="/main/cinema" tag="li">影院</router-link>
                <router-link to="/main/my" tag="li">我的</router-link>
            </ul>
        </footer>
    </div>
</template>

<style lang="scss">
    .main-wrap{
        width:100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        header{
            width:100%;
            height: 44px;
            background: red;
            color:#fff;
            text-align: center;
            line-height: 44px;
        }
        .con{
            width:100%;
            flex:1;
        }
        footer ul{
            width:100%;
            height:44px;
            background: #eee;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .active{
                color:red;
            }
        }
    }
</style>

